<template>
	<view class="hbh_container2">
		<headComponent navTitle="修改密码" :isBack="true"></headComponent>
		<view class="hbh_box">
			<view style="height: 151rpx;">

			</view>
			<SendCode :password="true" :maxlength="11" :isSee="true" :placeholder="'请输入7~11位数字+字母组合密码'" @sendValue="sendCode3">
			</SendCode>
			<SendCode :password="true" :isSee="true" :placeholder="'请再次确认密码'" @sendValue="sendCode4">
			</SendCode>
			<SendCode :maxlength="11" :inpType="'number'" :placeholder="'请输入您的手机号'" @sendValue="sendCode">
			</SendCode>
			<SendCode :maxlength="6" :inpType="'number'" :placeholder="'请输入验证码'" @sendValue="sendCode2"
				:isCode="true"></SendCode>
			<view class="hbh_senBtn" @click="handelRequire">
				确定修改
			</view>
		</view>
	</view>
</template>

<script>
	import SendCode from "@/components/hbhInput/hbhInput.vue"
	export default {
		data() {
			return {
				newPhoneNumber: "",
				code: "",
				password: "",
				resetPwd: "",
				putType: false
			};
		},
		components: {
			SendCode
		},
		methods: {
			sendCode(val) {
				this.newPhoneNumber = val
			},
			sendCode2(val) {
				this.code = val
			},
			sendCode3(val) {
				this.password = val
			},
			sendCode4(val) {
				this.resetPwd = val
			},
			handelRequire() {
				if (!this.newPhoneNumber || !this.code || !this.resetPwd || !this.password) {
					uni.showToast({
						icon: "error",
						title: "信息填写不全"
					})
				} else {
					if (this.newPhoneNumber.length < 11 || this.code.length < 6) {
						uni.showToast({
							icon: "none",
							title: "信息格式不正确"
						})
					} else {
						uni.showToast({
							icon: "success",
							title: "更换手机号成功"
						})
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.hbh_senBtn {
		margin-left: calc(50% - 315rpx);
		margin-top: 100rpx;
		width: 630rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #6ECDFF 0%, #00A7FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
		text-align: center;
		line-height: 90rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>